<template>
  <div class='design'>

    <div class='header'>
      <HeadTop />
    </div>

    <div class='directory'>
      <Navlist @sectNameEnv="sectNameEnv" @nodeIdEnv='nodeIdEnv' :outline='outline' v-if="outline.length>0"  :nodeid='nodeid'></Navlist>
    </div>

    <!-- 教学设计的主要内容 -->
    <div class='main'>
      <ChapShow :sectName="sectName"  :nodeid="nodeid"></ChapShow>
    </div>

  </div>
</template>

<script setup>
import HeadTop from '@/components/chapterHeader.vue';
import Navlist from './children/Navlist.vue';
import ChapShow from './children/ChapShow.vue';
import { chapterInit } from "@/api/chapter.js";
import { ElMessage } from 'element-plus';

import { useRoute } from 'vue-router';
const sectName=ref()
sectName.value=useRoute().query.name

defineOptions({
  name: 'ChapterIndex'
})

const outline = JSON.parse(sessionStorage.getItem('outlineData'))
const nodeid = ref('');
nodeid.value = sessionStorage.getItem('nodeid');


const nodeIdEnv = (e) => {
  nodeid.value = e;
  sessionStorage.setItem('nodeid', e);
};
const sectNameEnv=(e)=>{
  sectName.value=e
}




</script>

<style lang='scss' scoped>
.design{
  border: 5px solid rgba(0,0,0,0);
}
.header {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}

.directory {
  width: 280px;
  background: #fff;
  box-shadow: 1px 0px 0px rgba(238, 238, 238, 1);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 70px 20px 0;
}

.main {
  width: calc(100% - 320px);
  background: #fff;
  margin-top: 70px;
  min-height: calc(100vh - 90px);
  border-radius: 10px;
  position: relative;
  z-index: 2;
  min-width: 1200px;
  margin-left: 300px;
}


</style>
